<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <!-- <div class="indexTitle">项目管理</div> -->
                    <div class="contentsize">文件上传</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="产权资料" name="first"></el-tab-pane>
                    <el-tab-pane label="经营资料" name="second"></el-tab-pane>
                </el-tabs>
                <div>
                    <el-button type="primary" @click="backForm">返回</el-button>
                </div>
            </div>
            <el-button type="primary" @click="savefile" style="margin-bottom: 10px;">新增</el-button>
            <div v-show="activeName == 'first'">
                <el-table :data="cqtable" style="width: 100%;" border>
                    <el-table-column label="文件类型" align="center" prop="wjlx">
                        <!-- <template>产权资料</template> -->
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <router-link target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008A94;"
                                v-if="scope.row.fj[0].suffix == '.docx' || scope.row.fj[0].suffix == '.doc' || scope.row.fj[0].suffix == '.xls' || scope.row.fj[0].suffix == '.xlsx'">{{
                    scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button type="text" size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else>{{ scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color:blue;text-decoration: underline">{{ scope.row.wjmc }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="deleteClick(scope.row)" style="color: red">删除</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column> -->
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,prev, pager, next,jumper" :total="cqzltotal"
                        :current-page.sync="cqzlcurrent" :page-size="pageSize"
                        @current-change="cqzlhandleCurrentChange">
                    </el-pagination>
                </div>
            </div>
            <div v-show="activeName == 'second'">
                <el-table :data="wtzltable" style="width: 100%;" border>
                    <el-table-column label="文件类型" align="center" prop="wjlx">
                        <!-- <template>经营资料</template> -->
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center">
                        <template slot-scope="scope">
                            <router-link target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.fj[0].id, type: scope.row.fj[0].suffix } }"
                                style="color: #008A94;"
                                v-if="scope.row.fj[0].suffix == '.docx' || scope.row.fj[0].suffix == '.doc' || scope.row.fj[0].suffix == '.xls' || scope.row.fj[0].suffix == '.xlsx'">{{
                    scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button type="text" size="small"
                                @click="redownload(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                v-else>{{
                    scope.row.wjmc }}<i class="el-icon-document el-icon--right"></i></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click="downloadfile(scope.row.fj[0].id, scope.row.fj[0].name, scope.row.fj[0].suffix)"
                                style="color:blue;text-decoration: underline">{{ scope.row.wjmc }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bz" label="备注" align="center"> </el-table-column>
                    <el-table-column prop="cjsj" label="上传时间" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.cjsj ? scope.row.cjsj.split(' ')[0] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="deleteClick(scope.row)" style="color: red">删除</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="sfgz" label="是否需要盖章" align="center"> </el-table-column> -->
                </el-table>
                <div class="pagination" style="float: right">
                    <el-pagination background layout="total,prev, pager, next,jumper" :total="jyzltotal"
                        :current-page.sync="jyzlcurrent" :page-size="pageSize"
                        @current-change="jyzlhandleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="文件" :visible.sync="yjshow" :modal-append-to-body="false" width="80%">
            <el-form ref="yjform" :model="yjform" label-width="auto" :inline="true">
                <el-form-item label="文件类型:" prop="yjlx">
                    <el-cascader :options="yjlxlist" :show-all-levels="false" v-model="yjlx"
                        placeholder="请选择文件类型" :props="{ checkStrictly: true }"></el-cascader>
                    <!-- <el-select v-model="yjform.yjlx" placeholder="请选择文件类型" style="width: 100%;">
                        <el-option v-for="item in yjlxlist" :key="item.code" :label="item.name" :value="item.code">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="文件名称:" prop="yjbz">
                    <el-input placeholder="请输入文件名称" v-model="yjform.yjbz" style="width: 100%;"></el-input>
                </el-form-item>
                <el-upload class="upload-demo" :action="httpUrl + '/file/uploadFile'" :on-remove="handleRemoves"
                    :before-remove="beforeRemoves" multiple :on-success="handelfilesuccess" :headers="myHeaders"
                    :file-list="filefileList">
                    <div class="unloadTitle">附件</div>
                    <el-button size="small" icon="el-icon-upload2">上传文件</el-button>
                </el-upload>
            </el-form>
            <div style="width: 220px;margin: auto;">
                <el-button type="primary" @click="submitForm" v-if="fileLists.length != 0">上传</el-button>
                <el-button @click="yjshow = false">关闭</el-button>
            </div>
            <el-table :data="yjtableData" style="width: 100%;margin: 30px auto 0;" border>
                <el-table-column prop="wjlx" label="文件类别" align="center"></el-table-column>
                <el-table-column prop="wjmc" label="文件" align="center"> </el-table-column>
                <el-table-column prop="bz" label="文件名称" align="center"> </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, yjtableData)"
                            style="color: red">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width: 220px;margin: auto;">
                <el-button @click="addfile" type="primary">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { builddetail, download, dawjlist, gdbgfileaddt, redownload,gdbgfiledel } from '@/api/index';
import fileType from "../vo/filetype";
import global from '@/components/common/httpurl.vue'
import valueList from '@/components/common/valueList.vue'
export default {
    name: 'wjsc',
    data() {
        return {
            yjlx:[],
            yjlxlist: valueList.yjlxlist,//是否列表
            sflist: valueList.sflist,//是否列表
            activeName: 'first',
            form: {},
            projectdetail: {},
            fileList: [],
            fileType: fileType,
            cqtable: [],//产权资料
            cqzltotal: 0,
            cqzlcurrent: 1,
            wtzltable: [],//委托资料
            jyzltotal: 0,
            jyzlcurrent: 1,
            cqzlform: {
                buildid: '',
                gdlx: '1',// 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },//产权资料form
            wtzlform: {
                buildid: '',
                gdlx: '2',// 文件类型 1：产权类 2：经营类 ,
                pageSize: 10,
                current: 1
            },//委托资料form
            wtxxtable: [],
            wtxxtotal: 0,
            wtxxcurrent: 1,
            pageSize: 10,
            wtxxform: {
                type: '2',
                relid: '',
                pageSize: 10,
                current: 1
            },
            zlxxtable: [],
            zlxxtotal: 0,
            zlxxcurrent: 1,
            zlxxform: {
                relid: '',
                pageSize: 10,
                current: 1
            },
            yjshow: false,//文件弹框
            yjform: {},//文件表单
            yjtableData: [],
            myHeaders: {
                'token': localStorage.getItem('token')
            },
            filefileList: [],
            fileLists: [],//文件列表
            httpUrl: global.httpUrl,//公共地址
            buildid: '',
            gdlx: '1',//归档类型 0：无 1：产权类 2：经营类 ,
        };
    },
    methods: {
        // 委托信息换页
        wtxxhandleCurrentChange(val) {
            this.wtxxcurrent = val;
            this.wtxxform.current = val;
            this.listbybuildid(this.wtxxform);
            console.log(val);
        },
        // 租赁信息换页
        zlxxhandleCurrentChange(val) {
            this.zlxxcurrent = val;
            this.zlxxform.current = val;
            this.htlistbybuildid(this.zlxxform);
            console.log(val);
        },
        // 经营资料换页
        jyzlhandleCurrentChange(val) {
            this.jyzlcurrent = val;
            this.wtzlform.current = val;
            this.wtdawjlist(this.wtzlform)
            console.log(val);
        },
        // 产权资料换页
        cqzlhandleCurrentChange(val) {
            this.cqzlcurrent = val;
            this.cqzlform.current = val;
            this.cqdawjlist(this.cqzlform);
            console.log(val);
        },
        // 返回上一页
        backForm() {
            this.$router.go(-1);
        },
        // 楼幢详情
        builddetail(data) {
            builddetail(data).then((res) => {
                this.projectdetail = res.data;
                console.log(this.projectdetail.fj)
            });
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            redownload(data).then(res => {
                console.log(res)
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank')
            })
        },
        // 产权资料文件
        cqdawjlist(data) {
            dawjlist(data).then(res => {
                console.log(res)
                this.cqtable = res.data.records
                this.cqzltotal = res.data.total
            })
        },
        // 委托资料文件
        wtdawjlist(data) {
            dawjlist(data).then(res => {
                this.wtzltable = res.data.records
                this.jyzltotal = res.data.total
                console.log(res)
            })
        },
        // 文件
        handleRemoves(file, fileList) {
            console.log(fileList)
            this.fileLists = fileLists
        },
        // 文件删除前
        beforeRemoves(file, fileList) {
            console.log(file)
            console.log(fileList)
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        // 上传成功
        handelfilesuccess(response, file, fileLists) {
            console.log(fileLists)
            this.fileLists = fileLists
            this.$message.success('导入成功');
        },
        // 上传功能
        submitForm() {
            if (this.yjlx) {
                var lastItem = this.yjlx[this.yjlx.length - 1]
                this.yjform.yjlx = lastItem
                //this.yjform.yjlx=this.yjform.yjlx.pop();

            } else {
                this.$message.error('请选择文件类型');
                return
            }
            console.log('yjlx', this.yjform.yjlx)
            console.log('yjbz', this.yjform.yjbz)
            console.log('fileLists', this.fileLists)
            // 类型 suffix
            let yjlb = this.fileLists.map(res => {
                return {
                    buildid: this.buildid,// 流程实例id ,
                    bz: this.yjform.yjbz,
                    create_name: '',//创建人 ,
                    create_name_id: '',//创建人id ,
                    create_time: '',//创建时间 ,
                    fj: res.response.data.id,//附件
                    gdlx: this.gdlx,//归档类型 0：无 1：产权类 2：经营类 ,
                    id: '',// id ,
                    status_code: '1',// 1正常 2删除 ,
                    update_name: '',// 修改人 ,
                    update_name_id: '',//修改人id ,
                    update_time: '',//修改时间 ,
                    wjmc: res.response.data.filename,//文件名称 ,
                    wjlx: this.yjform.yjlx,//文件类型
                }
            })
            console.log('yjlb', yjlb)
            this.yjtableData = this.yjtableData.concat(yjlb)
            this.yjform.yjlx = null;
            this.yjform.yjbz = null;
            this.yjform.sfgz = null;
            this.yjlx= null;
            this.filefileList = [];
            this.fileLists = [];
        },
        // 文件弹框
        savefile() {
            this.yjshow = true
            if (this.activeName == 'first') {
                this.gdlx = '1'
                this.yjtableData = []
            } else if (this.activeName == 'second') {
                this.gdlx = '2'
                this.yjtableData = []
            }
        },
        // 删除
        deleteRow(index, rows) {
            this.$confirm('确定删除此条文件吗？')
                .then(() => {
                    rows.splice(index, 1);
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
        // 保存文件
        addfile() {
            console.log(this.yjtableData)
            this.yjtableData.map(item => {
                this.gdbgfileaddt(item)
            })
        },
        // 文件上传
        gdbgfileaddt(data) {
            gdbgfileaddt(data).then(res => {
                this.$message.success('保存成功')
                this.yjshow = false
                this.cqdawjlist(this.cqzlform)
                this.wtdawjlist(this.wtzlform)
            })
        },
        // 文件删除
        deleteClick(e) {
            console.log(e);
            this.$confirm('确定删除此文件吗？')
                .then(() => {
                    let data = { id: e.id };
                    gdbgfiledel(data).then((res) => {
                        if (res.code == 200) {
                            this.cqdawjlist(this.cqzlform)
                            this.wtdawjlist(this.wtzlform)
                            this.$message.success('删除成功');
                        }
                    });
                })
                .catch(() => {
                    this.$message.success('删除取消');
                });
        },
    },
    mounted() {
        let data = {
            id: this.$route.params.id
        };
        this.builddetail(data);
        this.buildid = this.$route.params.id
        // 偷懒写法，对于面对存在分页啥的情况比较省事
        this.cqzlform.buildid = this.$route.params.id
        this.wtzlform.buildid = this.$route.params.id
        this.cqdawjlist(this.cqzlform)
        this.wtdawjlist(this.wtzlform)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: auto;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* border-bottom: 1px solid #eeeeee; */
    padding-bottom: 20px;
    box-sizing: border-box;
    /* margin-bottom: 20px; */
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 100%;
    margin-bottom: 30px;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.filebox:hover .fileboxitem {
    color: #7090ff;
}
</style>